<template>
  <div class="public-page-search" :class="{ 'demo-mode': systemModel === 'YS' }">
    <a-row
      class="supper-type-card"
      :span="24"
      style="background: #141414"
      v-show="queryForm.searchType == '0' ? true : false"
    >
      <a-col :span="24" v-for="item in navData" :key="item.code">
        <a-col :span="5">
          <a-card size="small" style="height: 100%; padding-top: 10px; align-items: center">
            <div class="type-card-key">
              <!-- <a-select
                default-value="lucy"
                :dropdownStyle="dropdownStyle"
                :dropdownMatchSelectWidth="false"
                style="width: 60px; margin-right: 10px"
              >
                <a-select-option value="lucy">
                  <img src="@/assets/image/tags/ai.svg" style="width: 17px; height: 17px" />
                </a-select-option>
                <a-select-option value="jack">
                  <span
                    class="iconfont icon-AIjiarengongbiaoqian"
                    style="width: 17px; height: 17px; color: #e99220"
                  ></span>
                  <span
                    style="
                      width: 8px;
                      height: 20px;
                      font-size: 14px;
                      font-family: Source Han Sans CN;
                      font-weight: 400;
                      line-height: 20px;
                      color: #ffffff;
                      opacity: 1;
                    "
                  >
                    +
                  </span>

                  <img src="@/assets/man.svg" alt="" style="width: 17px; height: 17px" />
                </a-select-option>
              </a-select> -->
              <img src="@/assets/image/tags/ai.svg" style="width: 17px; height: 17px" />
              {{ item.name }}:
            </div>
          </a-card>
        </a-col>
        <a-col :span="19">
          <a-card size="small" class="type-card-value">
            <div class="type-card-list">
              <a
                href="javascript:;"
                v-for="el in item.children"
                :value="el.code"
                :key="el.code"
                class="type-card-item"
                :class="el.code == checkedTag ? 'active' : 'activeEl'"
                @click="handleTag(el, item)"
                :style="{
                  color: getCurrentItemColor(el.attributes.controlFlag),
                  cursor: `${el.attributes.controlFlag == 2 ? 'not-allowed' : ''}`,
                }"
              >
                <span
                  class="type-card-item_marker"
                  v-if="el.attributes && el.attributes.isLabel == 1"
                ></span>
                {{ el.name }}
              </a>
            </div>
          </a-card>
        </a-col>
      </a-col>
    </a-row>
    <supper-select
      ref="select"
      @change="supperSelectChange"
      :options="supperSelectOptions"
    ></supper-select>
  </div>
  <a-card size="small" style="margin-top: 8px">
    <div style="float: left; width: 400px">
      <a-input-group compact>
        <a-select
          v-model:value="queryForm.inputType"
          style="width: 100px"
          @change="selectChangeHandle"
        >
          <a-select-option value="">全部</a-select-option>
          <a-select-option value="call">报警内容</a-select-option>
          <a-select-option value="deal">出警情况</a-select-option>
          <a-select-option value="caseNo">警情单号</a-select-option>
          <a-select-option value="callPhone">报警电话</a-select-option>
          <a-select-option value="callAddress">事发地址</a-select-option>
        </a-select>
        <a-input-search
          v-model:value="queryForm.inputParams"
          @search="handleSearch"
          @pressEnter="handleSearch"
          placeholder="请输入关键词"
          style="width: 200px"
        />
      </a-input-group>
    </div>
    <div style="float: right">
      <span style="width: 70px">报警时间：</span>
      <a-range-picker
        @change="onChanpige"
        @ok="handleOk"
        :value="date"
        show-time
        format="YYYY-MM-DD HH:mm:ss"
      />
      <a-button type="primary" style="margin-left: 20px" @click="handleResh">重置</a-button>
    </div>
  </a-card>
</template>
<script lang="ts">
import { defineComponent, reactive, ref, onMounted, toRaw, computed } from 'vue';
import SupperSelect from '@/components/supper-select/index.vue';
import { getParamsCodes } from '@/components/supper-select/index.js';
import { queryTime } from '@/api/intelligentanalysis/alert';
import { useStore } from 'vuex';
import { getInitParams } from '@/views/intelligent-analysis/js/publicQuery';
import { PublicQueryState } from '@/views/intelligent-analysis/typing';

export default defineComponent({
  components: {
    SupperSelect,
  },
  props: {
    filter: {
      default: '',
    },
  },
  emits: ['pageSearchChange'],
  setup(props, { emit }) {
    const store = useStore();

    const dropdownStyle = ref<any>({
      width: '80px',
    });
    const systemModel = computed(() => store.getters['user/systemModel']);

    const date = ref<any>([]);
    const publicParams = getInitParams('statistics');
    const queryForm: PublicQueryState = reactive({
      ...publicParams,
      dealFlag: 1,
      classifyNames: '',
    });

    const supperSelectOptions = [
      {
        type: 'ai',
        visible: false, // 隐藏
      },
    ];
    //日期
    const onChanpige = (a, b) => {
      date.value = b;
    };
    const handleOk = () => {
      queryForm.callTimeStart = date.value[0];
      queryForm.callTimeEnd = date.value[1];
      emit('pageSearchChange', queryForm);
    };
    const getCurrentItemColor = status => {
      const textStatusMap = {
        1: '#FFD6A1',
        2: '#878787',
        3: 'rgb(136 183 150)',
      };
      return textStatusMap[status];
    };

    //日期
    const onChange = (a, b) => {
      date.value = b;
      queryForm.callTimeStart = b[0];
      queryForm.callTimeEnd = b[1];
    };

    // 搜索分类
    const selectChangeHandle = () => {
      emit('pageSearchChange', queryForm);
    };

    //点击搜索图标
    const handleSearch = value => {
      queryForm.inputParams = value;
      emit('pageSearchChange', queryForm);
    };
    const supperSelectChange = data => {
      const { jq, fk, xqdw } = getParamsCodes(data);
      queryForm.callSummaryCodes = jq;
      queryForm.dealSummaryCodes = fk;
      queryForm.xqdwCodes = xqdw;
      emit('pageSearchChange', queryForm);
    };

    const navData = ref<any>([]);
    const handlegetParamList = () => {
      store.dispatch(`dictionary/GET_TREE_PARAM`).then(() => {
        const classifyTree = { value: toRaw(store.getters['dictionary/classifyTree']) };
        if (props.filter) {
          classifyTree.value = classifyTree.value.filter(item => {
            if (item.children && item.children.length) {
              item.children = item.children.filter(item => item.attributes[props.filter]);
            }
            return item.attributes[props.filter];
          });
        }

        classifyTree.value.forEach(item => {
          if (item.children) {
            item.children.unshift({ name: '全部', code: item.code, attributes: item.attributes });
          }
        });
        navData.value = classifyTree.value;
      });
    };
    const checkedTag = ref<string>();
    onMounted(() => {
      handlegetParamList();
      handlequeryTime();
    });
    //tag点击事件
    const parentCode = ref<string>('');
    const codeName = ref<string>('');
    const handleTag = (el, item) => {
      if (el.code === item.children[0].code) {
        codeName.value = item.name.split('感知专题')[0];
      } else {
        codeName.value = el.name + '类';
      }

      if (el.attributes?.controlFlag == '2') {
        return;
      }
      if (el.code == checkedTag.value) {
        checkedTag.value = '';
        parentCode.value = '';
        queryForm.classifyCodes = '';
        queryForm.classifyNames = '';
        codeName.value = '';
      } else {
        checkedTag.value = el.code;
        parentCode.value = item.code;
        queryForm.dealFlag = el.attributes.nrFlag;
        queryForm.classifyCodes = el.code;
        queryForm.classifyNames = el.name;
      }
      emit('pageSearchChange', queryForm, el.attributes, codeName.value);
    };
    //获取时间
    const handlequeryTime = () => {
      queryTime({ module: 'ZNFX' }).then(res => {
        date.value[0] = res.data.callTimeStart;
        date.value[1] = res.data.callTimeEnd;
        queryForm.callTimeStart = res.data.callTimeStart;
        queryForm.callTimeEnd = res.data.callTimeEnd;
        emit('pageSearchChange', queryForm);
      });
    };
    //重置
    const handleResh = () => {
      location.reload();
    };
    return {
      handleResh,
      handleOk,
      selectChangeHandle,
      onChange,
      parentCode,
      handleTag,
      checkedTag,
      handlegetParamList,
      supperSelectOptions,
      supperSelectChange,
      handleSearch,
      date,
      queryForm,
      navData,
      dropdownStyle,
      onChanpige,
      getCurrentItemColor,
      systemModel,
    };
  },
});
</script>
<style lang="less" scoped>
:deep(.ant-select-selection-item) {
  text-align: center;
}
:deep(.ant-select-item-option-content) {
  text-align: center;
}

:deep(.ant-card-small > .ant-card-body) {
  padding: 0px;
}
.icon-AIjiarengongbiaoqian:before {
  content: '\e6c8';
}

.public-page-search {
  // 演示模式
  &.demo-mode {
    .type-card-item {
      cursor: pointer;
      transition: transform 0.3s;
      &:hover {
        z-index: 99;
        transform: scale(1.8);
        // font-size: 20px;
        // background: #2b2d33;
        // border-radius: 18px;
        // box-shadow: 0px 0px 10px #e99220;
        // box-shadow: 0px 0px 10px #ccc;
        // box-shadow: 0px 0px 12px #1b81e0;
        // .ant-list-item-main {
        //   .ant-list-item-meta,
        //   .case-desc-text,
        //   .deal-desc-text,
        //   .extra-text {
        //     font-size: 20px;
        //   }
        // }
      }
    }
  }
  .supper-type-card {
    & > .ant-col {
      display: flex;
    }
    .type-card-key {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      width: 100%;
      margin-bottom: 10px;
      margin-left: 10px;
      color: #e99220;
      font-weight: bold;
      font-size: 14px;
      font-family: Source Han Sans CN;
      text-align: left;
      vertical-align: top;
      & > img {
        margin-right: 5px;
      }
    }
    .type-card-value {
      display: flex;
      align-items: center;
      height: 100%;
      padding-bottom: -10px;
      .type-card-list {
        display: flex;
        flex-flow: wrap;
        width: 100%;
        margin: 11px 0px 0px 11px;
        .type-card-item {
          position: relative;
          margin-right: 4px;
          margin-bottom: 10px;
          padding: 4px 12px;
          color: #ffffff;
          font-weight: 400;
          font-size: 14px;
          font-family: Source Han Sans CN;
          border: 1px solid #845c27;
          &::before {
            position: absolute;
            top: -4px;
            left: -4px;
            z-index: 55;
            display: block;
            width: 8px;
            height: 8px;
            background: #2b2d33;
            border-right: 1px solid #845c27;
            transform: rotate(45deg);
            content: '';
          }
          &.activeEl {
            background: #261601;
          }
          &.active {
            background: #c27818;
          }
          .type-card-item_marker {
            position: absolute;
            right: 2px;
            bottom: 2px;
            width: 0;
            height: 0;
            border-top: 6px solid transparent;
            border-right: 6px solid #845c27;
            border-bottom: 0 solid #845c27;
            border-left: 0 solid #845c27;
          }
        }
      }
    }
  }
}
</style>
